<!--
 * @Date: 2025-09-11 08:36:57
 * @LastEditors: 肖世渊 xiao2655308229@163.com
 * @LastEditTime: 2025-09-19 14:56:22
 * @FilePath: \23信算\city\src\pages\components\Left1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 150px;margin-top: 20px;"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '监测日报'
        }
    },
    methods: {
        loadLeida() {
            const data = [
                {
                    type: 'tsp',
                    sales: 38,
                },
                {
                    type: 'pm10',
                    sales: 52,
                },
                {
                    type: 'pm25',
                    sales: 61,
                },
                {
                    type: 'noise',
                    sales: 145,
                },
                {
                    type: 'temperature',
                    sales: 48,
                },
                {
                    type: 'humidity',
                    sales: 38,
                },
                {
                    type: 'wind_speed',
                    sales: 38,
                },
                {
                    type: 'wind_direction',
                    sales: 38,
                },
            ];

            const barPlot = new Bar(this.$refs.bottom4, {
                data,
                xField: 'sales',
                yField: 'type',
                seriesField: 'type',
                color: ({ type }) => {
                    return type === 'noise' ? '#FAAD14' : '#5B8FF9';
                },
                legend: false,
                meta: {
                    type: {
                        alias: '类别',
                    },
                    sales: {
                        alias: '销售额',
                    },
                },
            });

            barPlot.render();

        }
    },
    mounted() {
        this.loadLeida();
    },

}
</script>
<style lang="less" scoped></style>